<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>v-bind</title>
    <script src="js/vuejs-2.5.16.js"></script>
    <style>

        /*类选择器*/
            .blue{
                background: blue;
            }

          .red{
              background: red;
          }

    </style>

</head>
<body>
            <div id="app">
                  属性的值 从数据模型获取 不能插值表达式
                <!--v-bind:  简写 ：冒号  <div  :class="color">-->
                <div  v-bind:class="color">
                    你好黑马
                   {{color}}
                </div>



            </div>
            <script>
                new Vue({
                    el: "#app",
                    data: {
                        color:'blue'
                    }
                })
            </script>

</body>
</html>